<template>
    <div class="ycgl_wrap">
        <div class="page-content">
            <div class="left-panel">
                <div class="panel-item">
                    <img class="panel-item-img" src="../../assets/images/ycgl/img_1.png" alt="" />

                    <div class="panel-item-row">
                        <span class="row-label">光伏站名称</span>
                        <span class="row-val">杭州滨江双创中心屋顶30kW光伏站点</span>
                    </div>
                    <div class="panel-item-row">
                        <span class="row-label">装机容量</span>
                        <span class="row-val">0.03MWp</span>
                    </div>
                    <div class="panel-item-row">
                        <span class="row-label">站点坐标</span>
                        <span class="row-val">120.216104，30.195953</span>
                    </div>
                    <div class="panel-item-row">
                        <span class="row-label">光伏板朝向</span>
                        <span class="row-val">正南</span>
                    </div>
                    <div class="panel-item-row">
                        <span class="row-label">光伏板角度</span>
                        <span class="row-val">30度</span>
                    </div>
                    <div class="panel-item-row">
                        <span class="row-label">所属线路</span>
                        <span class="row-val"></span>
                    </div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">站点简介</div>
                    <div class="panel-content">这是杭州滨江双创中心屋顶30kW光伏站点简介信息</div>
                </div>

                <div class="panel-item">
                    <div class="panel-title">气象数据</div>
                    <div class="panel-content">
                        <div class="item-panel">5公里</div>
                        <div class="item-panel">982百帕</div>
                        <div class="item-panel">5级</div>
                        <div class="item-panel">西风</div>
                        <div class="item-panel">93%</div>
                        <div class="item-panel">25°C</div>
                    </div>
                </div>
            </div>

            <div class="right-panel">
                <div class="top-panel">
                    <div class="item-panel">
                        <div class="item-panel-label">实时预测准确率（额定）</div>
                        <div class="item-panel-num">98.29<span>%</span></div>
                    </div>
                    <div class="item-panel">
                        <div class="item-panel-label">目前预测准确率（额定）</div>
                        <div class="item-panel-num">93.09<span>%</span></div>
                    </div>
                    <div class="item-panel">
                        <div class="item-panel-label">今日发电量</div>
                        <div class="item-panel-num">78.91<span>KWH</span></div>
                    </div>
                    <div class="item-panel">
                        <div class="item-panel-label">今日最高功率</div>
                        <div class="item-panel-num">26.41<span>KW</span></div>
                    </div>
                </div>

                <div class="middle-panel">

                    <div class="item-panel">
                        <div class="panel-title">实时数据</div>
                        <div class="panel-content" ref="lineChart"></div>
                    </div>

                    <div class="item-panel">
                        <div class="panel-title">站点7日发电量</div>
                        <div class="panel-content" ref="barChart"></div>
                    </div>
                </div>

                <div class="bottom-panel">
                    <div class="item-panel">
                        <div class="item-box">
                            <div class="item-num">95.92<span class="item-unit">%</span></div>
                            <div class="item-label">历史实时准确率（额定）</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">91.04<span class="item-unit">%</span></div>
                            <div class="item-label">历史目前准确率（额定）</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">86.32<span class="item-unit">%</span></div>
                            <div class="item-label">历史预测达标率</div>
                        </div>
                    </div>

                    <div class="item-panel">
                        <div class="item-panel-title">历史数据</div>
                        <div class="date-box">
                            <el-date-picker
                                    v-model="value1"
                                    type="datetimerange"
                                    range-separator="~"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>

                        <div class="chart-box" ref="lineChart1"></div>
                    </div>

                    <div class="item-panel">
                        <div class="item-box">
                            <div class="item-num">483.28<span class="item-unit">KWH</span></div>
                            <div class="item-label">历史平均发电量</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">107.77<span class="item-unit">KW</span></div>
                            <div class="item-label">历史平均最高功率</div>
                        </div>
                        <div class="item-box">
                            <div class="item-num">8.63<span class="item-unit">H</span></div>
                            <div class="item-label">历史平均日照时数</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value1: [new Date(), new Date()],
            }
        },
        methods: {
            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '20%',
                        right: '2%',
                        bottom: '3%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#35C759','#6EF690'],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#35C759',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(53,199,89,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(53,199,89,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#6EF690',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(110,246,144,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(110,246,144,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },

            barChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '20%',
                        right: '2%',
                        bottom: '3%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',//鼠标移动上去的样式，有line和shadow两种
                        },
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#2C50EE','#35C759'],
                    xAxis: [
                        {
                            type: 'category',
                            // boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            barWidth: 10,
                            type: 'bar',
                            data: obj.value[1],
                        },
                    ],
                };

                chart.setOption( option );
            },

            lineChartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '7%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 14,
                        }
                    },
                    grid: {
                        top: '23%',
                        right: '1%',
                        bottom: '5%',
                        left: '1%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '7%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#35C759','#86DD9B','#C2EECD'],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#35C759',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(53,199,89,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(53,199,89,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                        {
                            name: obj.legend[1],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#86DD9B',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(134,221,155,0.12)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(134,221,155,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[1],
                        },
                        {
                            name: obj.legend[2],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#C2EECD',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(194,238,205,0.11)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(194,238,205,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[2],
                        },
                    ],
                };

                chart.setOption( option );
            },
        },
        mounted() {
            this.chartLoad(
                {
                    names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                        [203, 133, 250, 130, 129, 130, 110, 150, 193, 200, 280, 149, 203, 280,223, 133, 220, 120, ]
                    ],
                    id: 'lineChart',
                    legend: ['预测功率', '实时功率', ],
                    title: '功率（KW）',
                }
            );

            this.barChartLoad(
                {
                    names: ['09/01','09/02','09/03','09/04','09/05','09/06','09/07',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210, ],
                        [203, 133, 250, 130, 129, 130, 110, ]
                    ],

                    id: 'barChart',
                    legend: ['预测发电量', '实时发电量', ],
                    title: '千瓦时（KWh）',
                }
            );

            this.lineChartLoad(
                {
                    names: ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',],
                    value: [
                        [233, 233, 200, 180, 199, 233, 210,153, 133, 100, 180, 199, 233, 210,233, 233, 200, 180, ],
                        [203, 133, 250, 130, 129, 130, 110, 150, 193, 200, 280, 149, 203, 280,223, 133, 220, 120, ],
                        [103, 123, 210, 110, 179, 190, 160, 110, 103, 100, 230, 119, 233, 240,273, 153, 260, 170, ],
                    ],
                    id: 'lineChart1',
                    legend: ['预测历史', '实际历史', '目前预测历史', ],
                    title: '功率（KW）',
                }
            );
        }
    }
</script>

<style lang="less">
    .ycgl_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.left-panel {
                display: inline-block;
                vertical-align: top;
                width: 360px;
                height: 956px;
                margin-right: 28px;

                >.panel-item {
                    width: 100%;
                    height: 410px;
                    background: #FFFFFF;
                    border-radius: 8px;
                    margin-bottom: 28px;
                    padding: 30px;
                    box-sizing: border-box;

                    &:nth-of-type( 1 ) {
                        height: 410px;
                        padding: 25px 20px;

                        .panel-item-img {
                            width: 100%;
                            margin-bottom: 70px;
                        }

                        .panel-item-row {
                            font-size: 14px;
                            color: #9A9FAF;
                            line-height: 28px;

                            >.row-label {
                                display: inline-block;
                                vertical-align: top;
                                text-align: right;
                                width: 73px;
                                margin-right: 12px;
                            }

                            >.row-val {
                                display: inline-block;
                                vertical-align: top;
                                width: calc( 100% - 73px - 12px );
                                color: #0E1526;
                            }
                        }
                    }

                    &:nth-of-type( 2 ) {
                        height: 206px;

                        >.panel-content {
                            font-size: 14px;
                            padding-left: 12px;
                            margin-top: 15px;
                            box-sizing: border-box;
                            color: #535763;
                            line-height: 20px;
                        }
                    }

                    &:nth-of-type( 3 ) {
                        height: calc( 100% - 410px - 206px  - 28px - 28px );

                        .panel-content {
                            margin-top: 13px;

                            >.item-panel {
                                display: inline-block;
                                vertical-align: top;
                                width: 144px;
                                height: 54px;
                                margin-right: 12px;
                                margin-bottom: 12px;
                                background-size: 100% 100%;
                                padding: 9px 0 0 60px;
                                box-sizing: border-box;
                                font-size: 12px;
                                font-weight: 600;
                                color: #0E1526;

                                &:nth-of-type( 2n ) {
                                    margin-right: 0;
                                }

                                &:nth-of-type( 1 ) {
                                    background-image: url("../../assets/images/ycgl/bg_item_1.png");
                                }

                                &:nth-of-type( 2 ) {
                                    background-image: url("../../assets/images/ycgl/bg_item_2.png");
                                }

                                &:nth-of-type( 3 ) {
                                    background-image: url("../../assets/images/ycgl/bg_item_3.png");
                                }

                                &:nth-of-type( 4 ) {
                                    background-image: url("../../assets/images/ycgl/bg_item_4.png");
                                }

                                &:nth-of-type( 5 ) {
                                    background-image: url("../../assets/images/ycgl/bg_item_5.png");
                                }

                                &:nth-of-type( 6 ) {
                                    background-image: url("../../assets/images/ycgl/bg_item_6.png");
                                }
                            }
                        }
                    }
                }
            }

            >.right-panel {
                display: inline-block;
                vertical-align: top;
                width: calc( 100% - 360px - 28px );
                height: 956px;

                >.top-panel {
                    height: 140px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 28px;

                    >.item-panel {
                        width: 278px;
                        height: 140px;
                        background-size: 100% 100%;
                        padding: 34px 0 0 84px;
                        box-sizing: border-box;

                        .item-panel-label {
                            font-size: 14px;
                            color: #FFFFFF;
                            line-height: 25px;
                        }

                        .item-panel-num {
                            font-size: 36px;
                            font-weight: 600;
                            color: #FFFFFF;
                            margin-top: 22px;

                            >span {
                                margin-left: 5px;
                                font-size: 20px;
                                font-weight: normal;
                            }
                        }

                        &:nth-of-type( 1 ) {
                            background-image: url("../../assets/images/ycgl/bg_item_7.png");
                        }

                        &:nth-of-type( 2 ) {
                            background-image: url("../../assets/images/ycgl/bg_item_8.png");
                        }

                        &:nth-of-type( 3 ) {
                            background-image: url("../../assets/images/ycgl/bg_item_9.png");
                        }

                        &:nth-of-type( 4 ) {
                            background-image: url("../../assets/images/ycgl/bg_item_10.png");
                        }
                    }
                }

                >.middle-panel {
                    width: 100%;
                    height: 340px;
                    margin-bottom: 28px;

                    >.item-panel {
                        display: inline-block;
                        vertical-align: top;
                        height: 100%;
                        width: calc( 50% - 14px );
                        background: #FFFFFF;
                        border-radius: 8px;
                        padding: 40px 40px 20px;
                        box-sizing: border-box;
                        margin-right: 28px;

                        .panel-content {
                            width: 100%;
                            height: calc( 100% - 28px - 20px );
                            margin-top: 20px;
                        }

                        &:nth-of-type( 1 ) {

                        }

                        &:nth-of-type( 2 ) {
                            margin-right: 0;
                        }
                    }
                }

                >.bottom-panel {
                    width: 100%;
                    height: calc( 100% - 140px - 340px - 28px - 28px );
                    background: #FFFFFF;
                    border-radius: 8px;
                    padding: 40px 40px 20px;
                    box-sizing: border-box;

                    >.item-panel {
                        display: inline-block;
                        vertical-align: top;
                        height: 100%;

                        &:nth-of-type( 1 ) {
                            width: 238px;

                            >.item-box {
                                width: 100%;
                                height: 96px;
                                background-color: #F9FAFE;
                                border-radius: 3px;
                                margin-bottom: 28px;
                                border: 1px solid #d5dcf1;
                                box-sizing: border-box;
                                padding: 20px 0 0 65px;

                                background-image: url("../../assets/images/ycgl/img_curve_1.png");
                                background-repeat: no-repeat;
                                background-position: 12px center;

                                >.item-num {
                                    font-size: 25px;
                                    font-weight: 600;
                                    color: #000000;
                                    line-height: 30px;

                                    .item-unit {
                                         font-size: 15px;
                                    }
                                }

                                >.item-label {
                                    margin-top: 3px;
                                    font-size: 14px;
                                    color: #535763;
                                }

                                &:nth-of-type( 1 ) {
                                    background-image: url("../../assets/images/ycgl/img_curve_1.png");
                                }

                                &:nth-of-type( 2 ) {
                                    background-image: url("../../assets/images/ycgl/img_curve_2.png");
                                }

                                &:nth-of-type( 3 ) {
                                    background-image: url("../../assets/images/ycgl/img_curve_3.png");
                                }
                            }
                        }

                        &:nth-of-type( 2 ) {
                            width: calc( 100% - 238px - 238px - 28px - 28px );
                            margin: 0 28px;
                            position: relative;

                            >.item-panel-title {
                                color: #0E1526;
                                font-size: 16px;
                                font-weight: 600;
                                line-height: 36px;
                            }

                            >.date-box {
                                position: absolute;
                                right: 0;
                                top: 0;

                                >.el-date-editor {
                                    width: 350px;
                                    height: 33px;
                                    background-color: #F9FAFE;
                                    border-color: #CFD1D8;

                                    .el-input__icon {
                                        line-height: 27px;
                                    }

                                    .el-range-input {
                                        font-size: 13px;
                                        background-color: transparent;
                                        line-height: 27px;
                                    }

                                    .el-range-separator {
                                        line-height: 27px;
                                    }
                                }
                            }

                            >.chart-box {
                                width: 100%;
                                height: calc( 100% - 36px );
                            }
                        }

                        &:nth-of-type( 3 ) {
                            width: 238px;

                            >.item-box {
                                width: 100%;
                                height: 96px;
                                background-color: #F9FAFE;
                                border-radius: 3px;
                                margin-bottom: 28px;
                                border: 1px solid #d5dcf1;
                                box-sizing: border-box;
                                padding: 20px 0 0 65px;

                                background-image: url("../../assets/images/ycgl/img_curve_1.png");
                                background-repeat: no-repeat;
                                background-position: 12px center;

                                >.item-num {
                                    font-size: 25px;
                                    font-weight: 600;
                                    color: #000000;
                                    line-height: 30px;

                                    .item-unit {
                                        font-size: 15px;
                                    }
                                }

                                >.item-label {
                                    margin-top: 3px;
                                    font-size: 14px;
                                    color: #535763;
                                }

                                &:nth-of-type( 1 ) {
                                    background-image: url("../../assets/images/ycgl/img_curve_4.png");
                                }

                                &:nth-of-type( 2 ) {
                                    background-image: url("../../assets/images/ycgl/img_curve_5.png");
                                }

                                &:nth-of-type( 3 ) {
                                    background-image: url("../../assets/images/ycgl/img_curve_6.png");
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
